<template>
    <el-card>
        <div class="message">开启博客评论通知</div>
        <el-form :model="userEmailForm" v-loading="loading" ref="emailForm">
            <el-form-item prop="userEmail" :rules="[{type: 'email', message: '邮箱格式不对哦!'}]">
                <el-input type="email" v-model="userEmailForm.userEmail" size="mini"></el-input>
                <el-button type="primary" size="mini" @click="updateUserEmail">确定</el-button>
            </el-form-item>
        </el-form>
    </el-card>

</template>

<script>
    import {get} from "../utils/api";

    export default {
        data() {
            return {
                userEmailForm: {userEmail: ''},
                loading: false,
            }
        },
        mounted() {
            this.getCurrentUserEmail();
        },
        methods: {
            getCurrentUserEmail() {
                this.loading = true;
                get('/user/getUserEmail').then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.userEmailForm.userEmail = res.data;
                    } else {
                        this.$message.error('邮箱获取失败')
                    }
                }).catch(_ => this.loading = false);
            },

            updateUserEmail() {
                this.$refs['emailForm'].validate(isValidate => {
                    if (!isValidate) {
                        this.$message.error('邮箱格式有误，请重新输入');
                        return;
                    }

                    get('/user/updateUserEmail', {email: this.userEmailForm.userEmail}).then(res => {
                        if (res.status === 0) {
                            this.$message.success('邮箱配置成功')
                        } else {
                            this.$message.error('邮箱配置失败')
                        }
                    }).catch(_ => this.loading = false);
                });
            }
        }
    }
</script>

<style scoped lang="stylus">

    .el-card {
        width 480px

        .message {
            text-align left
        }

        .el-form {
            text-align left

            .el-input {
                margin-top 30px
                width 300px
                margin-right 10px
            }
        }
    }

</style>
